<template>
  <div id="audio-player" class="audio-player">
    <!-- 播放器界面 -->
    <div 
      class="audio-player-ui"
      :class="{ active: !controlsHidden && showControls }"
    >
      <!-- 进度条 -->
      <div class="progress-container">
        <div 
          class="progress-bar"
          :style="{ width: progress + '%' }"
          @click="seek"
        ></div>
        <div 
          class="progress-indicator"
          :style="{ left: progress + '%' }"
        ></div>
      </div>
      
      <!-- 控制按钮 -->
      <div class="audio-controls">
        <button 
          id="play-btn" 
          class="audio-btn play-btn"
          @click="togglePlay"
          :disabled="audioError"
          :title="isPlaying ? '暂停' : '播放'"
        >
          <i v-if="!isPlaying" class="fas fa-play"></i>
          <i v-else class="fas fa-pause"></i>
        </button>
        
        <button 
          id="prev-btn" 
          class="audio-btn prev-btn"
          @click="playPrevious"
          :disabled="!hasPrevious() || audioError"
          title="上一首"
        >
          <i class="fas fa-step-backward"></i>
        </button>
        
        <button 
          id="next-btn" 
          class="audio-btn next-btn"
          @click="playNext"
          :disabled="!hasNext() || audioError"
          title="下一首"
        >
          <i class="fas fa-step-forward"></i>
        </button>
        
        <!-- 当前播放时间 -->
        <span 
          id="current-time" 
          class="time-display"
        >
          {{ formatTime(currentTime) }}
        </span>
        
        <!-- 音量控制 -->
        <div 
          id="volume-control" 
          class="volume-control"
          :class="{ active: showVolumeSlider }"
        >
          <button 
            class="audio-btn volume-btn"
            @click.stop="toggleVolumeSlider"
            :title="'音量: ' + volume + '%'"
          >
            <i v-if="volume === 0" class="fas fa-volume-mute"></i>
            <i v-else-if="volume < 50" class="fas fa-volume-down"></i>
            <i v-else class="fas fa-volume-up"></i>
          </button>
          <input 
            type="range" 
            min="0" 
            max="100" 
            :value="volume"
            @input="setVolume"
            class="volume-slider"
          >
        </div>
        
        <!-- 静音按钮 -->
        <button 
          id="mute-btn" 
          class="audio-btn mute-btn"
          @click="toggleMute"
          :disabled="audioError"
          :title="isMuted ? '取消静音' : '静音'"
        >
          <i v-if="!isMuted" class="fas fa-volume-up"></i>
          <i v-else class="fas fa-volume-mute"></i>
        </button>
        
        <!-- 循环播放按钮 -->
        <button 
          id="loop-btn" 
          class="audio-btn loop-btn"
          @click="toggleLoop"
          :disabled="audioError"
          :title="'循环: ' + getLoopTitle()"
          :class="{ active: loopMode !== 'none' }"
        >
          <i v-if="loopMode === 'none'" class="fas fa-redo"></i>
          <i v-else-if="loopMode === 'one'" class="fas fa-redo-alt"></i>
          <i v-else class="fas fa-random"></i>
        </button>
        
        <!-- 播放列表按钮 -->
        <button 
          id="playlist-btn" 
          class="audio-btn playlist-btn"
          @click="togglePlaylist"
          :disabled="audioError"
          title="播放列表"
          :class="{ active: showPlaylist }"
        >
          <i class="fas fa-list"></i>
        </button>
        
        <!-- 全屏按钮 -->
        <button 
          id="toggle-controls-btn" 
          class="audio-btn toggle-controls-btn"
          @click="toggleControls"
          :disabled="audioError"
          :title="showControls ? '隐藏控制' : '显示控制'"
        >
          <i v-if="showControls" class="fas fa-chevron-down"></i>
          <i v-else class="fas fa-chevron-up"></i>
        </button>
      </div>
      
      <!-- 当前播放信息 -->
      <div 
        class="now-playing-info"
        v-if="currentAudio"
      >
        <div class="audio-title">{{ currentAudio.title || '未知标题' }}</div>
        <div class="audio-artist">{{ currentAudio.artist || '未知艺术家' }}</div>
      </div>
      
      <!-- 错误信息 -->
      <div 
        class="audio-error"
        v-if="audioError"
      >
        <i class="fas fa-exclamation-circle"></i>
        <span>{{ audioError }}</span>
      </div>
    </div>
    
    <!-- 播放列表 -->
    <div 
      id="audio-playlist" 
      class="audio-playlist"
      :class="{ active: showPlaylist && !controlsHidden }"
    >
      <div class="playlist-header">
        <h3>播放列表</h3>
        <button 
          class="close-playlist"
          @click="togglePlaylist"
          title="关闭播放列表"
        >
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="playlist-content">
        <div v-if="audioList.length === 0" class="empty-playlist">
          <p>播放列表为空</p>
        </div>
        <div v-else>
          <div 
            v-for="(audio, index) in audioList" 
            :key="audio.id || index"
            class="playlist-item"
            :class="{ active: isCurrentAudio(audio) }"
            @click="playAudioByIndex(index)"
          >
            <div class="playlist-item-info">
              <div class="playlist-item-title">{{ audio.title || '未知标题' }}</div>
              <div class="playlist-item-artist">{{ audio.artist || '未知艺术家' }}</div>
            </div>
            <div class="playlist-item-time">{{ formatTime(audio.duration) }}</div>
            <button 
              class="playlist-item-remove"
              @click.stop="removeAudio(index)"
              title="移除"
            >
              <i class="fas fa-trash-alt"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 音频元素 -->
    <audio 
      ref="audioRef"
      :src="currentAudio?.url"
      @loadedmetadata="handleLoadedMetadata"
      @timeupdate="handleTimeUpdate"
      @ended="handleAudioEnded"
      @error="handleAudioError"
      @loadeddata="handleLoadedData"
    ></audio>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'

export default {
  name: 'AudioPlayer',
  props: {
    audioList: {
      type: Array,
      default: () => [
        {
          id: '1',
          title: '默认背景音乐1',
          artist: '未知艺术家',
          url: '/audio/background1.mp3'
        },
        {
          id: '2',
          title: '默认背景音乐2',
          artist: '未知艺术家',
          url: '/audio/background2.mp3'
        }
      ]
    },
    autoPlay: {
      type: Boolean,
      default: false
    },
    controlsHidden: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    // 音频元素引用
    const audioRef = ref(null)
    
    // 状态管理
    const isPlaying = ref(false)
    const currentAudio = ref(null)
    const currentAudioIndex = ref(-1)
    const currentTime = ref(0)
    const duration = ref(0)
    const progress = ref(0)
    const volume = ref(80)
    const isMuted = ref(false)
    const loopMode = ref('none') // none, one, random
    const showControls = ref(true)
    const showVolumeSlider = ref(false)
    const showPlaylist = ref(false)
    const audioError = ref('')
    const loading = ref(false)
    
    // 计算当前进度百分比
    const progressPercentage = computed(() => {
      return duration.value > 0 ? (currentTime.value / duration.value) * 100 : 0
    })
    
    // 格式化时间为分:秒
    const formatTime = (timeInSeconds) => {
      const minutes = Math.floor(timeInSeconds / 60)
      const seconds = Math.floor(timeInSeconds % 60)
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
    }
    
    // 检查是否是当前播放的音频
    const isCurrentAudio = (audio) => {
      if (!currentAudio.value || !audio) return false
      return currentAudio.value.id === audio.id || (audio.url === currentAudio.value.url && !audio.id && !currentAudio.value.id)
    }
    
    // 检查是否有上一首
    const hasPrevious = () => {
      return props.audioList.length > 0 && currentAudioIndex.value > 0
    }
    
    // 检查是否有下一首
    const hasNext = () => {
      return props.audioList.length > 0 && currentAudioIndex.value < props.audioList.length - 1
    }
    
    // 获取循环模式的中文标题
    const getLoopTitle = () => {
      switch (loopMode.value) {
        case 'one':
          return '单曲循环'
        case 'random':
          return '随机播放'
        default:
          return '列表循环'
      }
    }
    
    // 播放指定索引的音频
    const playAudioByIndex = (index) => {
      if (index < 0 || index >= props.audioList.length) {
        return
      }
      
      // 如果正在播放当前曲目，点击时暂停
      if (index === currentAudioIndex.value && isPlaying.value) {
        pauseAudio()
        return
      }
      
      // 重置错误状态
      audioError.value = ''
      
      // 设置当前曲目
      const audio = props.audioList[index]
      currentAudio.value = audio
      currentAudioIndex.value = index
      
      // 重置时间和加载状态
      currentTime.value = 0
      progress.value = 0
      loading.value = true
      
      // 更新音频元素的src
      if (audioRef.value) {
        audioRef.value.src = audio.url
        
        // 尝试播放
        audioRef.value
          .play()
          .then(() => {
            isPlaying.value = true
          })
          .catch(error => {
            console.error('播放失败:', error)
            audioError.value = '播放失败，请稍后再试'
            isPlaying.value = false
            loading.value = false
          })
      }
    }
    
    // 播放指定的音频对象
    const playAudio = (audio) => {
      if (!audio || !props.audioList || props.audioList.length === 0) {
        return
      }
      
      // 查找音频在列表中的索引
      const index = props.audioList.findIndex(a => 
        a.id === audio.id || (a.url === audio.url && !a.id && !audio.id)
      )
      
      if (index !== -1) {
        playAudioByIndex(index)
      } else {
        // 如果不在列表中，可以选择添加到列表并播放
        // 这里简化处理，只播放第一个
        playAudioByIndex(0)
      }
    }
    
    // 播放上一首
    const playPrevious = () => {
      if (!hasPrevious()) {
        return
      }
      playAudioByIndex(currentAudioIndex.value - 1)
    }
    
    // 播放下一首
    const playNext = () => {
      if (loopMode.value === 'random' && props.audioList.length > 1) {
        // 随机播放，确保不是同一首
        let nextIndex
        do {
          nextIndex = Math.floor(Math.random() * props.audioList.length)
        } while (nextIndex === currentAudioIndex.value)
        playAudioByIndex(nextIndex)
      } else if (hasNext()) {
        playAudioByIndex(currentAudioIndex.value + 1)
      } else if (loopMode.value !== 'none') {
        // 如果是循环模式，播放列表的第一首
        playAudioByIndex(0)
      }
    }
    
    // 暂停音频
    const pauseAudio = () => {
      if (audioRef.value) {
        audioRef.value.pause()
        isPlaying.value = false
      }
    }
    
    // 切换播放/暂停
    const togglePlay = () => {
      if (audioError.value) {
        return
      }
      
      if (!currentAudio.value && props.audioList && props.audioList.length > 0) {
        // 如果没有当前曲目，播放列表的第一首
        playAudioByIndex(0)
      } else if (isPlaying.value) {
        pauseAudio()
      } else {
        if (audioRef.value) {
          audioRef.value
            .play()
            .then(() => {
              isPlaying.value = true
            })
            .catch(error => {
              console.error('播放失败:', error)
              audioError.value = '播放失败，请稍后再试'
            })
        }
      }
    }
    
    // 跳转播放进度
    const seek = (event) => {
      if (!audioRef.value || !duration.value) {
        return
      }
      
      const progressContainer = event.currentTarget.parentElement
      const rect = progressContainer.getBoundingClientRect()
      const clickPosition = event.clientX - rect.left
      const percentage = clickPosition / rect.width
      const seekTime = duration.value * percentage
      
      if (audioRef.value) {
        audioRef.value.currentTime = seekTime
        currentTime.value = seekTime
        progress.value = percentage * 100
      }
    }
    
    // 设置音量
    const setVolume = (event) => {
      const newVolume = parseInt(event.target.value)
      volume.value = newVolume
      
      if (audioRef.value) {
        audioRef.value.volume = newVolume / 100
        if (newVolume > 0 && isMuted.value) {
          isMuted.value = false
          audioRef.value.muted = false
        }
      }
    }
    
    // 切换静音
    const toggleMute = () => {
      if (!audioRef.value) {
        return
      }
      
      isMuted.value = !isMuted.value
      audioRef.value.muted = isMuted.value
    }
    
    // 切换循环模式
    const toggleLoop = () => {
      switch (loopMode.value) {
        case 'none':
          loopMode.value = 'one'
          break
        case 'one':
          loopMode.value = 'random'
          break
        case 'random':
          loopMode.value = 'none'
          break
      }
    }
    
    // 切换控制栏显示/隐藏
    const toggleControls = () => {
      showControls.value = !showControls.value
    }
    
    // 切换音量滑块显示/隐藏
    const toggleVolumeSlider = () => {
      showVolumeSlider.value = !showVolumeSlider.value
    }
    
    // 切换播放列表显示/隐藏
    const togglePlaylist = () => {
      showPlaylist.value = !showPlaylist.value
    }
    
    // 移除播放列表中的音频
    const removeAudio = (index) => {
      // 注意：这里不能直接修改props，应该通过emit事件通知父组件
      console.log('移除音频:', index)
      // 如果移除的是当前播放的音频，播放下一首或停止
      if (index === currentAudioIndex.value) {
        if (props.audioList.length > 1) {
          playNext()
        } else {
          pauseAudio()
          currentAudio.value = null
          currentAudioIndex.value = -1
          currentTime.value = 0
          duration.value = 0
          progress.value = 0
        }
      }
    }
    
    // 处理音频元数据加载完成
    const handleLoadedMetadata = () => {
      if (audioRef.value) {
        duration.value = audioRef.value.duration || 0
        loading.value = false
      }
    }
    
    // 处理音频加载完成
    const handleLoadedData = () => {
      loading.value = false
    }
    
    // 处理播放时间更新
    const handleTimeUpdate = () => {
      if (audioRef.value) {
        currentTime.value = audioRef.value.currentTime || 0
        progress.value = progressPercentage.value
      }
    }
    
    // 处理音频播放结束
    const handleAudioEnded = () => {
      if (loopMode.value === 'one') {
        // 单曲循环，重新播放当前曲目
        if (audioRef.value) {
          audioRef.value.currentTime = 0
          audioRef.value.play().then(() => {
            isPlaying.value = true
          })
        }
      } else {
        // 播放下一首或结束
        playNext()
      }
    }
    
    // 处理音频错误
    const handleAudioError = () => {
      if (audioRef.value) {
        const errorCode = audioRef.value.error?.code
        const errorMessages = {
          1: '加载被中止',
          2: '网络错误',
          3: '解码错误',
          4: '媒体格式不支持'
        }
        
        audioError.value = errorMessages[errorCode] || '播放错误'
        isPlaying.value = false
        loading.value = false
      }
    }
    
    // 初始化音频播放器
    const initAudioPlayer = () => {
      // 设置默认音量
      if (audioRef.value) {
        audioRef.value.volume = volume.value / 100
      }
      
      // 如果有音频列表，设置第一首为当前曲目
      if (props.audioList && props.audioList.length > 0) {
        currentAudio.value = props.audioList[0]
        currentAudioIndex.value = 0
      }
    }
    
    // 延迟初始化音乐播放，确保组件完全加载完成
    const deferredAudioPlayback = () => {
      // 仅在需要自动播放时执行
      if (props.autoPlay && props.audioList && props.audioList.length > 0) {
        // 使用requestAnimationFrame确保在浏览器渲染周期的空闲时间执行
        requestAnimationFrame(() => {
          // 添加额外的setTimeout确保组件完全加载
          setTimeout(() => {
            playAudioByIndex(0)
          }, 500)
        })
      }
    }
    
    // 监听播放列表变化
    watch(() => props.audioList, (newList, oldList) => {
      if (newList && newList.length > 0) {
        // 如果当前没有选中的曲目，选择第一首
        if (!currentAudio.value || currentAudioIndex.value < 0) {
          currentAudio.value = newList[0]
          currentAudioIndex.value = 0
        } else {
          // 检查当前曲目是否仍在列表中
          const currentAudioInNewList = newList.find(a => 
            a.id === currentAudio.value.id || (a.url === currentAudio.value.url && !a.id && !currentAudio.value.id)
          )
          
          if (!currentAudioInNewList) {
            // 如果不在列表中，选择第一首
            currentAudio.value = newList[0]
            currentAudioIndex.value = 0
          } else {
            // 更新当前曲目的索引
            const newIndex = newList.findIndex(a => 
              a.id === currentAudio.value.id || (a.url === currentAudio.value.url && !a.id && !currentAudio.value.id)
            )
            currentAudioIndex.value = newIndex
          }
        }
      } else {
        // 列表为空，重置状态
        currentAudio.value = null
        currentAudioIndex.value = -1
        currentTime.value = 0
        duration.value = 0
        progress.value = 0
        isPlaying.value = false
      }
    }, { deep: true })
    
    // 监听控制栏状态变化
    watch(() => props.controlsHidden, (hidden) => {
      if (hidden) {
        showPlaylist.value = false
        showVolumeSlider.value = false
      }
    })
    
    // 初始化
    onMounted(() => {
      initAudioPlayer()
      
      // 挂载到全局，以便在需要时通过window访问
      window.audioPlayer = {
        play: togglePlay,
        pause: pauseAudio,
        next: playNext,
        prev: playPrevious,
        toggleControls,
        togglePlaylist,
        playAudio
      }
      
      // 延迟执行音乐播放，确保组件完全加载和渲染完成
      requestAnimationFrame(() => {
        setTimeout(deferredAudioPlayback, 1000)
      })
    })
    
    // 清理
    onUnmounted(() => {
      if (audioRef.value) {
        audioRef.value.pause()
        audioRef.value = null
      }
      
      // 移除全局引用
      if (window.audioPlayer) {
        delete window.audioPlayer
      }
    })
    
    return {
      audioRef,
      isPlaying,
      currentAudio,
      currentAudioIndex,
      currentTime,
      duration,
      progress,
      volume,
      isMuted,
      loopMode,
      showControls,
      showVolumeSlider,
      showPlaylist,
      audioError,
      loading,
      formatTime,
      isCurrentAudio,
      hasPrevious,
      hasNext,
      getLoopTitle,
      playAudioByIndex,
      playAudio,
      playPrevious,
      playNext,
      pauseAudio,
      togglePlay,
      seek,
      setVolume,
      toggleMute,
      toggleLoop,
      toggleControls,
      toggleVolumeSlider,
      togglePlaylist,
      removeAudio,
      handleLoadedMetadata,
      handleLoadedData,
      handleTimeUpdate,
      handleAudioEnded,
      handleAudioError,
      initAudioPlayer
    }
  }
}
</script>

<style scoped>
/* 播放器主容器 */
.audio-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1000;
  transition: transform 0.3s ease;
}

/* 播放器界面 */
.audio-player-ui {
  padding: 10px 20px;
}

/* 进度条 */
.progress-container {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 10px;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #ff9f43;
  border-radius: 2px;
  transition: width 0.1s ease;
}

.progress-indicator {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.progress-container:hover .progress-indicator {
  opacity: 1;
}

/* 控制按钮 */
.audio-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.audio-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.audio-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.audio-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.audio-btn.active {
  color: #ff9f43;
}

.play-btn {
  font-size: 18px;
  width: 42px;
  height: 42px;
}

/* 时间显示 */
.time-display {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  min-width: 40px;
}

/* 音量控制 */
.volume-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}

.volume-slider {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  margin-bottom: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 1001;
}

.volume-control.active .volume-slider {
  opacity: 1;
  pointer-events: all;
}

/* 播放信息 */
.now-playing-info {
  margin-top: 8px;
}

.audio-title {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.audio-artist {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

/* 错误信息 */
.audio-error {
  margin-top: 8px;
  color: #ef4444;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 播放列表 */
.audio-playlist {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 999;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.audio-playlist.active {
  max-height: 400px;
}

.playlist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.playlist-header h3 {
  color: #fff;
  margin: 0;
  font-size: 16px;
}

.close-playlist {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-playlist:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.playlist-content {
  max-height: 300px;
  overflow-y: auto;
}

.empty-playlist {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.5);
}

.playlist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.playlist-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.playlist-item.active {
  background: rgba(255, 159, 67, 0.2);
  border-left: 3px solid #ff9f43;
}

.playlist-item-info {
  flex: 1;
}

.playlist-item-title {
  color: #fff;
  font-size: 14px;
  margin-bottom: 2px;
}

.playlist-item-artist {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.playlist-item-time {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin-right: 10px;
}

.playlist-item-remove {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: all 0.2s ease;
  opacity: 0;
}

.playlist-item:hover .playlist-item-remove {
  opacity: 1;
}

.playlist-item-remove:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ef4444;
}

/* 滚动条样式 */
.playlist-content::-webkit-scrollbar {
  width: 6px;
}

.playlist-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.playlist-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.playlist-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .audio-controls {
    gap: 10px;
  }
  
  .audio-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  
  .play-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .now-playing-info {
    display: none;
  }
  
  .volume-control {
    position: relative;
  }
  
  .volume-slider {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>